<template>
  <div class="detail">
    <nav-bar>
      <template v-slot:center>
        <span style="font-size: 0.16rem; color: #fff">图书兄弟-详情页</span>
      </template>
    </nav-bar>
    <scroll ref="myScroll" class="my-scroll">
      <!-- 图片 -->
      <van-image width="100%" height="" :src="goods.cover_url" lazy-load />
      <!-- 商品详情卡片 -->
      <van-card
        v-show="Object.keys(goods).length"
        :num="goods.stock"
        :price="goods.price + '.00'"
        :desc="goods.description"
        :title="goods.title"
        class="van-card"
      >
        <template #tags>
          <van-tag plain type="danger" v-if="goods.is_on">新书</van-tag>
          <van-tag plain type="danger" v-if="goods.is_recommend">推荐</van-tag>
        </template>
      </van-card>
      <!-- 导航栏 -->
      <van-tabs v-model="active">
        <van-tab title="概述">
          <div class="content" v-html="goods.details"></div>
        </van-tab>
        <van-tab title="热评">
          <h4 v-for="item in goods.comments">{{ item.content }}</h4>
        </van-tab>
        <van-tab title="相关图书">
          <!-- 商品列表 -->
          <goods-list :goodslist="like_goods" />
        </van-tab>
      </van-tabs>
      <!-- v-model:num的使用 -->
      <!-- <Child v-model:num="num" /> -->
    </scroll>
    <!-- 购买栏 -->
    <van-action-bar class="van-action-bar">
      <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-action-bar-icon icon="cart-o" text="购物车" />
      <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
      <van-action-bar-button type="warning" text="加入购物车" @click="handleAddCart" />
      <van-action-bar-button type="danger" text="立即购买" @click="goToCart" />
    </van-action-bar>
  </div>
</template>

<script>
import UseTabBar from 'hooks/tabbar/UseTabBar'
import { addCart } from 'network/cart'
import { getDetailData } from 'network/detail'
import { ref, reactive, toRefs, watchEffect, nextTick } from 'vue'
import GoodsList from 'components/content/goods/GoodsList.vue'
import Scroll from 'components/common/scroll/Scroll.vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { Toast } from 'vant'
// import Child from './Child.vue'
export default {
  components: { GoodsList, Scroll },
  // components: { GoodsList, Scroll, Child },
  name: 'Detail',
  props: ['id'],
  setup(props) {
    UseTabBar()
    let num = ref(0)
    // 生成路由实例
    const router = useRouter()
    // 生成Vuex实例
    const store = useStore()
    // myscroll实例
    let myScroll = ref(null)
    // 图书的id
    let id = ref(props.id)
    // 激活的tab栏下标
    let active = ref(0)
    // 保存的商品页数据
    let bookDetail = reactive({
      goods: {},
      like_goods: []
    })
    // 封装一个获取数据的方法
    async function DetailData(id) {
      const res = await getDetailData(id)
      bookDetail.goods = res.goods
      bookDetail.like_goods = res.like_goods
    }
    // 添加购物车的方法
    async function handleAddCart() {
      const res = await addCart({ goods_id: id.value, num: 1 })
      if (res.status === 201 || res.status === 204) {
        Toast.success('加入购物车成功!')
        store.dispatch('cart/updateCart')
      }
    }
    // 立即购买(跳转到购物车页面)
    async function goToCart() {
      const res = await addCart({ goods_id: id.value, num: 1 })
      if (res.status === 201 || res.status === 204) {
        Toast.success('加入购物车成功!')
        store.dispatch('cart/updateCart')
        router.push('/shopcart')
      }
    }
    watchEffect(() => {
      nextTick(() => {
        myScroll && myScroll.value.refresh()
      })
    })
    DetailData(id.value)
    return {
      id,
      active,
      store,
      router,
      ...toRefs(bookDetail),
      myScroll,
      handleAddCart,
      goToCart,
      num
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 10px;
  img {
    max-width: 100%;
    height: auto;
  }
}
.my-scroll {
  height: calc(100vh - 0.44rem - 0.49rem);
}
.van-action-bar {
  z-index: 10;
  border-top: 0.05rem solid #fff;
}
</style>